<script setup>
import { Plus } from "@element-plus/icons-vue";
import useTable from "@/utils/useTable";
import {http} from "@/api";
import {onMounted, ref} from "vue";

/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openEdit,
  openDelete
} = useTable({
  requestFn: http.recharge,
  routerPre: 'recharge',
  params: {
    user_id: '',
    start_date: '',
    end_date: ''
  }
})
const userList = ref([])
onMounted(() => {
  http.user.list().then(res => {
    userList.value = res.data
  })
})
</script>


<template>
  <PageMain title="充值记录">
    <el-form label-suffix="：" inline>
      <el-form-item label="用户">
        <el-select v-model="searchParams.user_id" style="width: 200px" filterable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in userList" :key="item.id" :label="item.email" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker type="date" v-model="searchParams.start_date" style="width: 200px" filterable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker type="date" v-model="searchParams.end_date" style="width: 200px" filterable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <el-table :data="dataSource">
        <el-table-column label="Askiina Tokens" prop="name">
        </el-table-column>
        <el-table-column label="token数量" prop="tokens">
        </el-table-column>
        <el-table-column label="充值金额" prop="amount">
        </el-table-column>
        <el-table-column label="充值日期" prop="create_time">
        </el-table-column>
        <el-table-column label="用户" prop="user.email">
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
      />
    </div>
  </PageMain>
</template>

<style scoped lang="scss">

</style>
